<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row
          type="flex"
          justify="end"
        >
          <a-col :md="5">
            <a-form-item label="数据中心">
              <a-select
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                v-model="datacenterId"
              >
                <a-select-option
                  v-for="d in datacenterList"
                  :key="d.id"
                  :value="d.id"
                >
                  {{ d.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="12"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
              >查询</a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span
        slot="action"
        slot-scope="text, record"
      >
        <a-button type="primary" size="small" icon="edit" @click="handleConfig(record)">设置</a-button>
      </span>
        <!-- <span slot="cpuCol" slot-scope="text, record">
        {{ setColText(record, "cpu") }}
      </span>
      <span slot="memoryCol" slot-scope="text, record">
        {{ setColText(record, "memory") }}
      </span> -->
      <div
        slot="thresholdSlot"
        slot-scope="text, record"
      >
        <a-tag :color="colorMap[item.thresholdKey]" v-for="(item,index) in record.schedulerConfigList" :key="index">{{configMap[item.thresholdKey] + ` - 评分阈值 ：`+ parseFloat(item.thresholdValue).toFixed(2)}}</a-tag>
      </div>
    </a-table>
    <config-modal
      ref="configModal"
      @ok="loadData"
    ></config-modal>
  </a-card>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";
  import ConfigModal from "./modules/ConfigModal";


  export default {
    name: "F030201",
    mixins: [GwListMixin],
    components: {
      ConfigModal,
    },
    data() {
      return {
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: "",
            key: "rowIndex",
            width: 50,
            scopedSlots: { customRender: "sortCol" },
          },
          {
            title: "数据中心",
            dataIndex: "name",
          },
          // {
          //   title: "处理器",
          //   dataIndex: "",
          //   scopedSlots: { customRender: "cpuCol" },
          // },
          // {
          //   title: "内存",
          //   dataIndex: "",
          //   scopedSlots: { customRender: "memoryCol" },
          // },
          {
            title: "调度策略",
            dataIndex: "thresholdKey",
            scopedSlots: { customRender: "thresholdSlot" }
            // customRender: (t, r, index) => {
            //   let str = "";
            //   if (r.schedulerConfigList) {
            //     r.schedulerConfigList.forEach((d) => {
            //       str += this.configMap[d.thresholdKey];
            //       str += "-评分阈值：";
            //       str += d.thresholdValue;
            //       str += ";";
            //     });
            //   }
            //   return str;
            // },
          },
          {
            title: "设置时间",
            dataIndex: "createTime",
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
          },
        ],
        configMap: {
          "DATACENTER_COST": "最优成本代价模型",
          "DATACENTER_DEVICE": "最优设备代价模型",
          "DATACENTER_POWER": "最优能耗代价模型",
          "DATACENTER_ELECTRIC": "配电子网均衡代价模型",
          "APP": "最优应用模型",
        },
        colorMap: {
          "DATACENTER_COST": "#017972",
          "DATACENTER_DEVICE": "#56c61f",
          "APP": "#2db7f5",
          "DATACENTER_POWER": "#017972",
          "DATACENTER_ELECTRIC": "#56c61f",
        },
        datacenterList: [],
        datacenterId: "",
      };
    },
    mounted() {
      this.loadDatacenterList();
      this.loadData();
    },
    methods: {
      loadDatacenterList() {
        gPostAction("/asset/listDatacenter", {}).then((res) => {
          if (res.success) {
            this.datacenterList = res.data;
            this.datacenterList.unshift({ id: "", name: "全部" });
          }
        });
      },
      loadData(isDoSearch) {
        this.gQueryParam.datacenterId = this.datacenterId;
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        gPostAction("/scheduler/datacenter_config/page", this.gQueryParam).then(
          (res) => {
            if (res.success) {
              this.gDataSource = res.data.list;
              this.gPagination.total = res.data.totalCount;
            }
          }
        );
      },
      handleConfig(data) {
        this.$refs.configModal.config(data);
      },
      resetSearchForm() {
        this.datacenterId = "";
      },
    },
  };
</script>
